<template>
  <el-row>
    <el-col :span="4">
      <el-scrollbar :height="scrollbarHeight">
        <view class="menu_title">
          <el-image style="width: 48px; height: 48px;border-radius: 30px;margin-right: 10px" src="logo.jpg" />
          <view>PiliPili Admin</view>
        </view>
        <el-menu
            :default-active="currentMenu"
            class="el-menu-vertical-demo"
            @select="handleMenuSelect"
            @open="handleOpen"
            @close="handleClose"
            unique-opened
        >
            <el-menu-item index="1-1"><font-awesome-icon :icon="['fas', 'house']" style="color: #afafaf;margin-right: 10px" size="xl" />首页</el-menu-item>
            <el-sub-menu index="2-1">
              <template #title>
                <font-awesome-icon :icon="['fas', 'film']" size="xl" style="color: #afafaf;margin-right: 10px"/>
                <span>视频管理</span>
              </template>
              <el-menu-item index="2-1-1"><font-awesome-icon :icon="['fas', 'square-plus']" size="xl" style="color: #afafaf;margin-right: 10px"/>添加视频</el-menu-item>
              <el-menu-item index="2-1-2"><font-awesome-icon :icon="['fas', 'pen-to-square']" size="xl" style="color: #afafaf;margin-right: 10px"/>视频编辑</el-menu-item>
              <el-menu-item index="2-1-3"><font-awesome-icon :icon="['fas', 'eye']" size="xl" style="color: #afafaf;margin-right: 10px"/>视频预览</el-menu-item>
            </el-sub-menu>
          <el-sub-menu index="3-1">
            <template #title>
              <font-awesome-icon :icon="['fas', 'user']" size="xl" style="color: #afafaf;margin-right: 10px"/>
              <span>用户管理</span>
            </template>
            <el-menu-item index="3-1-1"><font-awesome-icon :icon="['fas', 'user-plus']" size="xl" style="color: #afafaf;margin-right: 10px"/>添加用户</el-menu-item>
            <el-menu-item index="3-1-2"><font-awesome-icon :icon="['fas', 'user-pen']" size="xl" style="color: #afafaf;margin-right: 10px"/>编辑用户</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4-1">
            <template #title>
              <font-awesome-icon :icon="['fas', 'gem']" size="xl" style="color: #afafaf;margin-right: 10px"/>
              <span>会员管理</span>
            </template>
            <el-menu-item index="4-1-1"><font-awesome-icon :icon="['fas', 'person-circle-plus']"  size="xl" style="color: #afafaf;margin-right: 10px"/>计划添加</el-menu-item>
            <el-menu-item index="4-1-2"><font-awesome-icon :icon="['fas', 'file-signature']" size="xl" style="color: #afafaf;margin-right: 10px"/>计划编辑</el-menu-item>
            <el-menu-item index="4-1-3"><font-awesome-icon :icon="['fas', 'users-gear']" size="xl" style="color: #afafaf;margin-right: 10px"/>管理会员</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="5-1" @click="logout"><font-awesome-icon :icon="['fas', 'right-from-bracket']" size="xl" style="color: #afafaf;margin-right: 10px"/>退出</el-menu-item>


        </el-menu>
      </el-scrollbar>
    </el-col>

    <el-col :span="20">
      <view class="main_right">
        <view class="main_right_top">
          <view class="top_items">
            <view class="top_house">
              <a href="https://movie.cpb2013.top/" style="color: black" target="_blank">
                <font-awesome-icon :icon="['fas', 'igloo']" size="xl" style="margin-right: 10px"/>主站点
              </a>
            </view>
            <view class="top_house">
              <a href="https://gitee.com/cpb2013/movie_list_admin/" style="color: black" target="_blank">
                <font-awesome-icon :icon="['fas', 'warehouse']" size="xl" style="margin-right: 10px"/>Gitee仓库
              </a>
            </view>
            <el-popover
                placement="top-start"
                :width="30"
                trigger="hover"
            >
              <template #reference>
                <view class="top_language">
                  <font-awesome-icon :icon="['fas', 'globe']" size="xl" />
                </view>
              </template>
              <el-radio-group model-value="1" class="ml-4">
                <el-radio value="1">简体中文</el-radio>
              </el-radio-group>
            </el-popover>
            <view class="top_setting">
              <font-awesome-icon :icon="['fas', 'gear']" size="xl" />
            </view>
            <view class="top_bell">
              <font-awesome-icon :icon="['far', 'bell']" size="xl" />
            </view>
            <view class="top_user" @click="toAccount">
              <font-awesome-icon :icon="['far', 'circle-user']" size="xl" />
              <view class="top_user_text">管理员</view>
            </view>
          </view>
        </view>
        <view class="main_right_items">
          <view v-if="currentMenu === '1-1'">
            <el-scrollbar :height="scrollbarHeight">
              <home_view></home_view>
            </el-scrollbar>
          </view>
          <view v-else-if="currentMenu === '2-1-1'">
            <video_create></video_create>
          </view>
          <view v-else-if="currentMenu === '2-1-2'">
            <video_edit></video_edit>
          </view>
          <view v-else-if="currentMenu === '2-1-3'">

            <el-scrollbar :height="scrollbarHeight">
<!--            <video_show></video_show>-->
              <search_list></search_list>
            </el-scrollbar>
          </view>
          <view v-else-if="currentMenu === '3-1-1'">
            <add_account></add_account>
          </view>
          <view v-else-if="currentMenu === '3-1-2'">
            <account_edit></account_edit>
          </view>
          <view v-else-if="currentMenu === '4-1-1'">
            <Rank_plan_add></Rank_plan_add>
          </view>
          <view v-else-if="currentMenu === '4-1-2'">
            <rank_plan_edit></rank_plan_edit>
          </view>
          <view v-else-if="currentMenu === '4-1-3'">
            <rank_edit></rank_edit>
          </view>
        </view>
      </view>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import {
  Document, Files, Notebook, PictureRounded,
} from '@element-plus/icons-vue'
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import Home_view from "@/items/home_view.vue";
import Video_create from "@/components/video_create.vue";
import Video_edit from "@/components/video_edit.vue";
import Video_show from "@/components/video_show.vue";
import Search_list from "@/items/video_items/search_list.vue";
import Add_account from "@/items/account_items/add_account.vue";
import Rank_plan_add from "@/items/rank_plan_items/add_card.vue";
import Account_edit from "@/components/account_edit.vue";
import rank_edit from "@/components/rank_edit.vue";
import Rank_plan_edit from "@/components/rank_plan_edit.vue";
import {ElLoading, ElMessage} from 'element-plus'

export default {
  components: {
    Rank_plan_edit,
    Account_edit,
    Add_account,
    Search_list,
    Video_show,
    Video_edit,
    Video_create,
    Home_view,
    rank_edit,
    Rank_plan_add,
    Files, Notebook, PictureRounded, Document
  },
  setup() {
    const currentMenu = ref("1-1"); // 初始值设置为默认的激活菜单
    const scrollbarHeight = ref('0px');
    const lang_set = ref('1');
    const router = useRouter();

    const openFullScreen = () => {
      const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      return loading;
    };

    const closeFullScreen = (loading) => {
      loading.close();
    };
    const handleMenuSelect = (index) => {
      currentMenu.value = index;
      console.log(currentMenu.value);
    };

    const handleOpen = (key, keyPath) => {
      console.log(key, keyPath);
    };

    const handleClose = (key, keyPath) => {
      console.log(key, keyPath);
    };

    const updateScrollbarHeight = () => {
      scrollbarHeight.value = `${window.innerHeight - 60}px`;
      console.log(scrollbarHeight.value);
    };

    const toAccount = () => {
      router.push({ path: '/account_setting' });
    };

    const logout = () => {

      let loading = openFullScreen();
      const formData = new FormData();
      formData.append('key', localStorage.getItem('key'));

      fetch('https://movie.cpb2013.top/admin/login.php?mode=logout', { method: 'POST', body: formData })
          .then(response => response.json())
          .then(data => {
            localStorage.removeItem('name');
            localStorage.removeItem('key');
            ElMessage({
              type: 'success',
              message: '登出成功',
            });
            router.push('/login');
          })
          .catch(error => {
            ElMessage({
              type: 'error',
              message: '登出失败',
            });
            console.error('登出请求失败:', error);
          })
          .finally( () => {
            closeFullScreen(loading);
          }
        )
    };

    onMounted(() => {
      updateScrollbarHeight();
      window.addEventListener('resize', updateScrollbarHeight);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', updateScrollbarHeight);
    });

    return {
      currentMenu,
      scrollbarHeight,
      handleMenuSelect,
      handleOpen,
      handleClose,
      toAccount,
      logout
    }
  }
}
</script>

<style scoped>
.el-menu
{
  border-right:1px black;
}
.menu_title
{
  display: flex;
  max-width: 100%;
  height: 60px;
  align-items: center;
  color: black;
  font-weight: 800;
  font-size: 18px;
  justify-content: left;
  padding-left: 30px;

}
.el-menu-item
{
  margin-left: 15px;
  margin-right: 15px;
  border-radius: 10px;
}
.el-menu-item.is-active
{
  color: white;
  background-color: #24a7f3;
}
.el-menu-item:hover
{
  background-color: #f3f3f3;
}
.el-sub-menu
{
  margin-left: 15px;
  margin-right: 15px;
}
.main_right
{
  width: 100%;
  height: 100%;
  display: flex;
  /*background-color: #dcdcdc;*/
  flex-wrap: wrap;
  flex-direction: column;
}
.main_right_top
{
  width: 100%;
  display: flex;
  height: 60px;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
  justify-content: right;
  background-color: white;
  /*border-bottom: 1px #cecece solid;*/
}
.main_right_items
{
  width: 100%;
  /*background-color: #dcdcdc;*/
}
.top_items
{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.top_language
{
  margin-left: 20px;
  width: 60px;
}
.top_user
{
  max-width: 140px;
}
.top_house
{
  width: 120px;
}
.top_setting
{
  width: 60px;
}
.top_bell
{
  width: 60px;
}
.top_user_text
{
  margin-left: 10px;
  font-size: 18px;
  color: darkgray;
  padding-right: 20px;
  user-select: none; /* 禁止选中 */
  cursor: pointer; /* 鼠标悬浮时显示指针 */
}
.el-scrollbar__view
{
  height: 100%;
}
</style>
